<template>
  <section id="product" class="top">
    <!--banner-->
    <div class="plan_banner"
         v-for="(item, index) in bannerData"
         v-if="index === 0"
         :style="{background: 'url('+item.bannerImg+') right no-repeat',backgroundSize: 'cover'}">
      <div class="main-width" v-if="dictionaryData.length > 0">
        <div class="plan_text slideInUp animated">
          <h3 style="margin-top: 20px;" >{{dictionaryData[0].statusValue}}</h3>
          <p >{{dictionaryData[1].statusValue}}</p>
        </div>
      </div>
    </div>
    <!--产品列表-->
    <section class="mt-40 mtt">
      <div class="main-width">
        <h1 class="content_region_title">您需要的产品</h1>
        <ul class="content_product_list cl" id="sortable">
          <li v-for="detail in productData" @mouseover="handleMouseover(detail.productId)" :class="detail.productId === productId ? 'mouse_hover' : ''">
            <div class="product_list_div">
              <img class="service_left" v-lazy="detail.productMinImg[0]" :key="detail.productMinImg[0]" alt=""/>
              <img class="service_right" v-lazy="detail.productMinImg[1]" :key="detail.productMinImg[1]"/>
              <img class="service_icon" v-lazy="detail.productMinImg[2]" :key="detail.productMinImg[2]" alt=""/>
              <span class="product_title">{{detail.productName}}</span>
            </div>
            <router-link :to="'product-detail?id=' + detail.productId ">
              <div class="product_list_div2" >
                <h3>
                  <img v-lazy="detail.productMinImg[3]" :key="detail.productMinImg[3]" alt=""/>
                  <span>{{detail.productName}}</span>
                </h3>
                <div class="service_text">
                  <p>{{detail.productIntroduce}}</p>
                </div>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </section>
    <Footer/>
  </section>
</template>

<script>
import indexJs from "./indexJs";
export default indexJs
</script>

<style scoped>

</style>
